<template>
  <el-dialog
    title="选择标签"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <div class="wrapper">
      <div
        v-for="(el, ind) in list"
        :key="ind"
        class="mb-20"
      >
        <div class="item">
          {{ el.name }}
        </div>
        <div class="flex flex-wrap align-items yunyin">
          <div class="tag">运营人员标记</div>
          <div
            v-if="el.operatorChildrenList"
            class="flex flex-wrap align-items"
          >
            <span
              v-for="(v, index) in el.operatorChildrenList"
              :key="index"
              :class="[v.selectedMark === 1 ? 'selected' : '', 'sub-item']"
              @click="select(v, el)"
            >
              {{ v.name }}
            </span>
          </div>
        </div>
        <div class="flex flex-wrap align-items yunyin">
          <div class="tag1">用户自己标记</div>
          <div
            v-if="el.childrenList"
            class="flex flex-wrap align-items"
          >
            <span
              v-for="(v, k) in el.childrenList"
              :key="k"
              class="userSign"
              :class="[
                v.selectedMark === 1 ? 'child-selected' : '',
                'user-sub-item',
              ]"
            >
              {{ v.name }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-end">
      <el-button @click="visible = false">取消</el-button>
      <el-button
        class="btn"
        type="primary"
        @click="confirm"
      >
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { fetchUserLabel, saveTag } from '@/api/app/labelMng';
export default {
  name: 'selectLabel',
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
    userId: {
      type: String,
    },
    selectList: { type: [Array] },
  },
  data() {
    return {
      list: [],
      confirmList: [],
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    async visible(val) {
      if (val) {
        await this.getList();
      }
    },
  },
  methods: {
    async getList() {
      try {
        const res = await fetchUserLabel(this.userId);
        this.list = res.data.data || [];
      } catch (error) {
        throw new Error(error);
      }
    },
    async confirm() {
      const result = [];
      this.list &&
        this.list.forEach((item) => {
          item.operatorChildrenList &&
            item.operatorChildrenList.forEach((item1) => {
              if (item1.selectedMark === 1) {
                // 选中
                result.push({ id: item1.id, name: item1.name });
              }
            });
        });
      const labelIds = result.map((item) => item.id);
      const params = {
        userId: this.userId,
        labelIds,
      };
      const res = await saveTag(params);
      console.log('保存res', res);
      this.visible = false;
      this.$emit('selected', result);
    },
    select(v, el) {
      if (v.selectedMark === null || v.selectedMark === 0) {
        v.selectedMark = 1;
      } else if (v.selectedMark === 1) {
        v.selectedMark = 0;
      }
      if (v.selectedMark && el.optionType === '0') {
        el.operatorChildrenList &&
          el.operatorChildrenList.forEach((item) => {
            if (item.id !== v.id) {
              item.selectedMark = 0;
            }
          });
      }
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.mb-20 {
  margin-bottom: 20px;
}

.wrapper {
  max-height: 500px;
  overflow-y: scroll;
  margin-bottom: 20px;
  .yunyin {
    margin-top: 20px;
    .tag,
    .tag1 {
      // font-weight: bold;
      margin-right: 10px;
      font-size: 13px;
    }
    .tag {
      color: #2e40ca;
    }
  }

  .item {
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }
  .sub-item {
    margin-right: 12px;
    border: 1px solid #000;
    padding: 3px 7px;
    cursor: pointer;
    box-sizing: border-box;
    color: #000;
    &.selected {
      background: #b5c7e4;
      color: #2e40ca;
      border: 1px solid #7b86de;
    }
  }
  .user-sub-item {
    margin-right: 12px;
    padding: 3px 7px;
    cursor: pointer;
    box-sizing: border-box;
    background: #fff;
  }
  .userSign {
    border: 1px solid #333;
    &:hover {
      cursor: not-allowed !important;
    }
  }

  .child-selected {
    background: #d2caca;
  }
}
</style>
